<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
          integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</head>
<body>
<div id="app">
    <table class="table">
        <thead>
        <tr>
            <th scope="col">序号</th>
            <th scope="col">姓名</th>
            <th scope="col">职位</th>
            <th scope="col">上司ID</th>
            <th scope="col">入职时间</th>
            <th scope="col">工资</th>
            <th scope="col">奖金</th>
            <th scope="col">部门ID</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(e,i) in emps">
            <th scope="row">{{i + 1}}</th>
            <td>{{e.enname}}</td>
            <td>{{e.job}}</td>
            <td>{{e.mgr}}</td>
            <td>{{e.hireDate}}</td>
            <td>{{e.sal}}</td>
            <td>{{e.comm}}</td>
            <td>{{e.deptno}}</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <th colspan="8">
                <nav aria-label="Page navigation example">
                    <ul class="pagination">
                        <li class="page-item">
                            <a class="page-link" href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li class="page-item" v-for="i in pages">
                            <a class="page-link" @click="loadEmpData(i)">{{i}}</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </th>
        </tr>
        </tfoot>
    </table>
</div>
</body>
</html>
<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                emps: [],
                pages: 0
            }
        },
        methods: {
            loadEmpData(page) {
                let _this = this
                let ajax = new XMLHttpRequest();
                ajax.onreadystatechange = function () {
                    if (ajax.status === 200 && ajax.readyState === 4) {
                        _this.emps = JSON.parse(ajax.responseText);
                    }
                }
                ajax.open('get', 'emp_find_page_ajax?page=' + page);
                ajax.send();
            },
            loadPageNumber() {
                let _this = this
                let ajax = new XMLHttpRequest();
                ajax.onreadystatechange = function () {
                    if (ajax.status === 200 && ajax.readyState === 4) {
                        _this.pages = parseInt(ajax.responseText);
                    }
                }
                ajax.open('get', 'emp_find_page_number_ajax');
                ajax.send();
            }
        },
        created() {
            this.loadEmpData(1)
            this.loadPageNumber()
        }
    })
</script>